<template>
  <div class="stockList">
    <el-tabs v-model="activeName" @tab-click="handelClick">
      <el-tab-pane :label="$t('market.materials')" name="first">
        <div class="header-name">
          <search
            :options="selectData"
            :msg="tacitly"
            @seek="collect"
            @hand="balance"
          />
          <el-button type="primary" class="btn" size="mini" @click="handleQueryBomList">{{ $t('btn.search') }}</el-button>
          <filtration
            class="btn1"
            :ftype="ftype"
            :msg="tacitly"
            :table-header="tableHeader"
            :detail-header="tableHeader"
            :select-data="selectData"
            @seachData="handleQueryBomList"
          />
        </div>
        <div>
          <jc-table
            :table-data="tableData"
            :table-header="tableHeader"
            table-height="300px"
          />
        </div>
        <cardTab :tab-arr="tabArr" field="materialfnumber" @search="handleQueryBomList1" />
        <div class="footer">
          <jc-pagination
            :total="total"
            :page.sync="currentPage"
            :limit.sync="size"
            @pagination="balance"
          />
        </div>
      </el-tab-pane>
      <el-tab-pane label="呆滞" name="third">
        <div class="header-name">
          <search :options="selectData" :msg="tacitly" @seek="collect" @hand="balance1" />
          <el-button type="primary" class="btn" size="mini" @click="balance1">{{ $t('btn.search') }}</el-button>
          <filtration
            class="btn1"
            :ftype="ftype"
            :msg="tacitly"
            :table-header="tableHeader2"
            :detail-header="tableHeader2"
            :select-data="selectData"
            @seachData="balance1"
          />
        </div>
        <div>
          <jc-table
            :table-data="tableData2"
            :table-header="tableHeader2"
            table-height="336px"
          />
        </div>
        <div class="footer">
          <jc-pagination
            :total="total2"
            :page.sync="currentPage2"
            :limit.sync="size2"
            @pagination="balance1"
          />
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import search from '@/components/Search'
import searData from '@/components/Search/mixin'
import {
  queryTBdCodeListSum
} from '@/api/homePage/wmsStock'
import filtration from '@/components/filtration'

export default {
  components: {
    cardTab: () => import('@/components/cardTab'),
    search,
    filtration
  },
  mixins: [searData],
  data() {
    return {
      ftype: 80,
      tableData: [],
      tableHeader: [ // 备料
        { label: this.$t('market.fmodel'), prop: 'fmodel' },
        { label: this.$t('market.fmaterial'), prop: 'materialfnumber', width: '120' },
        { label: this.$t('shop.fname2'), prop: 'materialfname', width: '120' },
        { label: this.$t('shop.fspecificaTion'), prop: 'fspecification' },
        { label: this.$t('shop.fdescripTion'), prop: 'fdescription', minWidth: '200' },
        { label: this.$t('market.funit'), prop: 'unit' },
        { label: this.$t('market.stock2'), prop: 'stockname' },
        { label: this.$t('market.storageLoca'), prop: 'positionName' },
        { label: this.$t('market.stockQty'), prop: 'fqty' },
        { label: this.$t('market.stocker'), prop: 'fstocker' }
      ],
      currentPage: 1,
      size: 50,
      total: 0,
      tabArr: [
        { label: '管材', name: '3-1-01' },
        { label: '布皮', name: '3-1-02' },
        { label: '海绵片材', name: '3-1-03' },
        { label: '海绵套件', name: '3-1-04' },
        { label: '软体座板', name: '3-1-05' },
        { label: '软体木条', name: '3-1-06' },
        { label: '曲木弯板', name: '3-1-07' },
        { label: '瓷砖', name: '3-1-08' },
        { label: '贴纸', name: '3-1-09' },
        { label: '封边', name: '3-1-10' },
        { label: '化工', name: '3-1-12' },
        { label: '木板', name: '3-1-13' },
        { label: '夹板', name: '3-1-14' },
        { label: '木方', name: '3-1-15' },
        { label: '玻璃', name: '3-1-18' }
      ],
      tableData2: [],
      tableHeader2: [ // 盘点异常清单
        { label: this.$t('market.fdate'), prop: 'fdate', width: '120' },
        { label: this.$t('market.billNo'), prop: 'fbillno', width: '120' },
        { label: this.$t('market.barcode'), prop: 'fcode', width: '120' },
        { label: this.$t('market.fmodel'), prop: 'fmodel', width: '120' },
        { label: this.$t('market.fmaterial'), prop: 'fnumber', width: '120' },
        { label: this.$t('shop.fname2'), prop: 'fname', width: '120' },
        { label: this.$t('shop.fspecificaTion'), prop: 'fspecification', width: '140' },
        // { label: this.$t('shop.fdescripTion'), prop: 'fdescription' },
        { label: this.$t('market.funit'), prop: 'funit', width: '80' },
        { label: this.$t('market.gainLoss'), prop: 'fqty', width: '120' },
        { label: this.$t('market.valueOf'), prop: 'fworth', width: '80' },
        { label: this.$t('market.stockname'), prop: 'fstockDesc' },
        { label: this.$t('market.stockname1'), prop: 'fposition' },
        { label: this.$t('market.operationOrder'), prop: 'fsourcebillno', width: '110' },
        { label: this.$t('market.createDate'), prop: 'fcreatedate' }
      ],
      currentPage2: 1,
      size2: 50,
      total2: 0,
      activeName: 'first',
      activeName2: 'first'
    }
  },
  created() {
    this.balance()
  },
  methods: {
    handelClick(tab) {
      this.searCollData = []
      this.searchSon = []
      if (tab.name === 'third') {
        this.tableData2.length === 0 && this.balance1()
      }
    },
    // 材料
    balance() {
      const DATA = {
        pageNum: this.currentPage,
        pageSize: this.size,
        search: this.searCollData
      }
      queryTBdCodeListSum(DATA).then(res => {
        if (res.code === 0) {
          this.tableData = res.data.list
          this.total = res.data.total
        }
      })
    },
    handleQueryBomList(ev) {
      this.currentPage = 1
      if (ev && ev.fname) {
        this.searchSon = ev.detail
        this.customHandle(ev)
        this.balance(ev.detail)
      } else {
        this.balance()
      }
    },
    // tab
    handleQueryBomList1(ev) {
      this.searCollData = []
      this.currentPage = 1
      this.searCollData = ev
      this.searchSon = ev
      this.balance()
    },
    // 盘盈、盘亏
    balance1() {
      // const DATA = {
      //   pageNum: this.currentPage2,
      //   pageSize: this.size2,
      //   fdocumentstatus: 'B',
      //   search: this.searCollData
      // }
      // api(DATA).then(res => {
      //   if (res.code === 0) {
      //     this.tableData2 = res.data.array
      //     this.total2 = res.data.total
      //   }
      // })
    },
    // 方案 -- 自定义列表
    customHandle(ev) {
      this.tableHeaders = []
      if (ev.header && ev.header.length > 0) {
        ev.header.forEach(item => {
          this.tableHeader.forEach(res => {
            if (res.label === item) {
              this.tableHeaders.push(res)
            }
          })
        })
        this.tableHeader = this.tableHeaders
      } else if (ev.fname === '筛选方案') {
        this.tableHeader = this.oldTabHeader
      }
    }
  }
}
</script>

<style scoped lang="scss">
.stockList {
  @include listBom;
  padding: 0;
  .header-name {
    position: relative;
    top: -5px;
    margin-bottom: 10px;
    display: flex;
    .btn {
      margin-left: 450px;
      transform: translateY(18%);
    }
    .btn1 {
      transform: translateY(25%);
    }
  }
}
</style>

